<script setup lang="ts">
import LoginLayout from '@/components/login-layout.vue'

import MobileRegisterForm from './mobile-register-form.vue'

const { push } = useRouter()

function goToLogin() {
    push('/login')
}
</script>

<template>
    <LoginLayout>
        <div class="register-form">
            <div class="switch absolute z-100"
                 @click="goToLogin"
            >
                <span class="text-14 text-#fff font-500 relative right-7 top-10">
                    登录
                </span>
            </div>

            <div class="form-content">
                <MobileRegisterForm />
            </div>
        </div>
    </LoginLayout>
</template>

<style lang="scss" scoped>
@function toVw($px) {
    @return #{calc(#{$px} * 100 / 1920 * 1vw)};
}
@function toVh($px) {
    @return #{calc(#{$px} * 100 / 1080 * 1vh)};
}
.register-form {
    width: toVw(480);
    height: toVh(688);
    background: #fff;
    margin-left: toVw(174);
    // margin-top: toVh(30);
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    justify-content: center;
    .form-content {
        width: calc(100% - toVw(80));
        margin-top: toVh(40);
        overflow-y: auto;
    }
}
.switch {
    cursor: pointer;
    height: 70px;
    width: 70px;
    background-image: url('/switch.svg');
    position: absolute;
    top: 0;
    right: 0;
    text-align: right;
    border-top-right-radius: 8px;
}
</style>
